/* eslint-disable react/jsx-pascal-case */
import React from "react";

const Leaseindex = () => {
    let navigate = React.$router.useNavigate();
    const [LoginUser, setLoginUser] = React.useState(React.$LoginUser ? React.$LoginUser : {})
    const [statuslist, setStatuslist] = React.useState([
        {
            id: 0,
            name: '全部'
        },
        {
            id: 1,
            name: '已下单'
        },
        {
            id: 2,
            name: '已发货'
        }, {
            id: 3,
            name: '已收货'
        },
        {
            id: 4,
            name: '已归还'
        },
        {
            id: 5,
            name: '未评价'
        },
        {
            id: 6,
            name: '已完成'
        }
    ])

    const [list, setList] = React.useState([])

    const [status, setStatus] = React.useState(0)

    React.useEffect(() => {
        getListData()
    }, [status])

    const getListData = async () => {
        let data = {
            busid: LoginUser.id,
            status: status
        }

        let result = await React.$api.leaseindex(data)
        if (result && result.code == 1) {
            setList(result.data)
        }
    }
    // 切换标签页
    const ChangeTabs = (val) => {
        setStatus(val.name)
    }

    // 跳转到详情页
    const ToPageDetail = (id) => {
        navigate(`/business/lease/info?leaseid=${id}`)
    }

    // 跳转到物流信息页面
    const ToPageExpress = (id) => {
        navigate(`/business/lease/express?leaseid=${id}`)
    }

    // 跳转到归还商品页面
    const ToRecover = (id) =>{
        navigate(`/business/lease/recovery?leaseid=${id}`)
    }
    
    // 跳转到评论页面
    const ToComment = (id) =>{
        navigate(`/business/lease/comment?leaseid=${id}`)
    }

    // 确认收货
    const ToConfirm = (id) => {
        console.log(id)
        React.$Vant.Dialog.confirm({
            message: '是否确认收货？',
        })
            .then(async() => {
                let data = {
                    id: id,
                    busid: LoginUser.id
                }
                let result = await React.$api.leaseconfirm(data)
                if(result && result.code === 1) {
                    React.$Vant.Toast.success({
                        message: result.msg,
                        onClose: () => {
                            getListData()
                        }
                    })
                } else {
                    React.$Vant.Toast.fail({
                        message: result.msg
                    })
                }
            })
            .catch(() => {})
    }

    const Buttons = (item) => {
        let items = item.item
        if (items.status == 2) {
            return (
                <React.$Vant.Button size="mini" type='info' round plain onClick={() => ToConfirm(items.id)}>
                    确认收货
                </React.$Vant.Button>
            )
        } else if (items.status == 3) {
            return (
                <React.$Vant.Button size="mini" type='warning' round plain onClick={() => ToRecover(items.id)}>
                    归还商品
                </React.$Vant.Button>
            )
        } else if (items.status == 5) {
            return (
                <React.$Vant.Button size="mini" type='danger' round plain onClick={() => ToComment(items.id)}>
                    订单评价
                </React.$Vant.Button>
            )
        }
    }

    return (
        <>
            <React.$Vant.NavBar
                title="我的订单"
                onClickLeft={() => navigate('/business/base/business')}
            />
            <React.$Vant.Tabs onClickTab={ChangeTabs} titleActiveColor="#ee0a24" color="#ee0a24">
                {statuslist.map(item => (
                    <React.$Vant.Tabs.TabPane name={item.id} key={item.id} title={item.name}>
                    </React.$Vant.Tabs.TabPane>
                ))}
            </React.$Vant.Tabs>
            {
                list.map(item => {
                    return (
                        <React.$Vant.ProductCard
                            key={item.id}
                            price={item.price}
                            title={item.product.name}
                            thumb={item.product.thumbs_text}
                            tags={
                                <>
                                    <div style={{ marginTop: '5px' }}>
                                        押金：{item.rent}
                                    </div>
                                    <div>
                                        日租： {item.product.rent_price}
                                    </div>
                                </>
                            }
                            num={
                                <>
                                    <React.$Vant.Tag plain type="danger" style={{ marginRight: 5 }}>
                                        {item.status_text}
                                    </React.$Vant.Tag>
                                </>
                            }
                            footer={
                                <>
                                    <React.$Vant.Button size="mini" type='primary' round plain style={{ marginRight: 2, marginTop: '10px' }} onClick={() => ToPageDetail(item.id)}>
                                        订单详情
                                    </React.$Vant.Button>

                                    <Buttons item={item} />

                                    {
                                        item.status >= 2 &&
                                        <React.$Vant.Button size="mini" color='linear-gradient(to right, #ff6034, #ee0a24)' round onClick={() => ToPageExpress(item.id)}>
                                            物流信息
                                        </React.$Vant.Button>
                                    }
                                </>
                            }
                        />
                    )
                })
            }
        </>
    )
}

export default Leaseindex;